<script setup lang="ts">
//切换主题 https://www.jianshu.com/p/3e6d831ac0f7
import { onMounted } from 'vue'
import {Icon,SettingOutlined} from "@ant-design/icons-vue";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
})

import { storeToRefs } from 'pinia'

import {useSettingStore} from "@/stores/setting";
const settingStore = useSettingStore()
const { sysTheme,nowTheme,themeSet,defStar } = storeToRefs(settingStore)
const { syncSysTheme,setTheme,setAutoTheme } = (settingStore)

onMounted(() => {
  let mqList = window.matchMedia('(prefers-color-scheme: light)')
  // detect if on light mode
  let sysTheme  = mqList.matches ? 'light' : 'dark';
  setAutoTheme(sysTheme)

  // 检测 MediqQueryList 对象上是否存在 addEventListener 方法
  if (mqList.addEventListener) {
    mqList.addEventListener('change', (event) => {
      sysTheme  = event.matches ? 'light' : 'dark'
      setAutoTheme(sysTheme)
    });
  } else if (mqList.addListener) {
    // 否则, 检测 MediqQueryList 对象上是否存在 addListener 方法
    mqList.addListener((event) => {
      sysTheme  = event.matches ? 'light' : 'dark'
      setAutoTheme(sysTheme)
    });
  }
})
</script>
<template>
  <div class="app-bar">
    <SettingOutlined />
  </div>
</template>

<style scoped>
.app-bar{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  background-color: #2c2c2c;
  height: 48px;
}
</style>
